<template>
  <div class="pie-view chart-container">
    <div class="chart-item" v-for="(chart, index) in chartComponents" :key="chart.name" @click="openChartPreview(chart.component)">
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '饼图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChartPreview from '@/components/chartPreview.vue';
import PieChart01 from './components/pieChart01.vue';
import PieChart02 from './components/pieChart02.vue';
import PieChart03 from './components/pieChart03.vue';
import PieChart04 from './components/pieChart04.vue';
import PieChart05 from './components/pieChart05.vue'; 
import PieChart06 from './components/pieChart06.vue';
import PieChart07 from './components/pieChart07.vue';
import PieChart08 from './components/pieChart08.vue';
import PieChart09 from './components/pieChart09.vue';
import PieChart10 from './components/pieChart10.vue';
import PieChart11 from './components/pieChart11.vue';
import PieChart13 from './components/pieChart13.vue';
import PieChart12 from './components/pieChart12.vue';
import PieChart14 from './components/pieChart14.vue';

const chartComponents = [
  { name: 'PieChart01', component: PieChart01, label: '饼图' },
  { name: 'PieChart02', component: PieChart02, label: '饼图' },
  { name: 'PieChart03', component: PieChart03, label: '饼图' },
  { name: 'PieChart04', component: PieChart04, label: '饼图' },
  { name: 'PieChart05', component: PieChart05, label: '饼图' },
  { name: 'PieChart06', component: PieChart06, label: '饼图' },
  { name: 'PieChart07', component: PieChart07, label: '饼图' },
  { name: 'PieChart08', component: PieChart08, label: '饼图' },
  { name: 'PieChart09', component: PieChart09, label: '饼图' },
  { name: 'PieChart10', component: PieChart10, label: '饼图' },
  { name: 'PieChart11', component: PieChart11, label: '饼图' },
  { name: 'PieChart12', component: PieChart12, label: '3D饼图' },
  { name: 'PieChart13', component: PieChart13, label: '3D饼图' },
  { name: 'PieChart14', component: PieChart14, label: '3D饼图' },
];

const chartPreviewRef = ref(null)

const openChartPreview = (component) => {
  chartPreviewRef.value.open(component)
}
</script>

<style scoped></style>
